<template>
  <template v-if="teamData">
    <van-cell-group inset>

      <!-- 队伍卡片 -->
      <van-cell>
        <van-card
            :desc="teamData.description"
            :thumb="teamData.teamUrl"
            :title="teamData?.name"
        >
          <template #tags>
            <van-tag plain style="margin-right: 8px; margin-top: 8px" type="danger">
              {{ teamStatusEnum[teamData.status] }}
            </van-tag>
          </template>
        </van-card>
      </van-cell>

      <!-- 队伍ID -->
      <CustomCell :value="teamData.id" center title="队伍ID" icon="points" />

      <!-- 队伍名 -->
      <CustomCell :value="teamData.name" center title="队伍名" icon="award-o" />

      <!-- 队长 -->
      <CustomCell :value="teamData.createUser.username" center title="队长" icon="manager-o" />

      <!-- 队伍描述 -->
      <CustomCell :value="teamData.description" center title="队伍描述" icon="label-o" />

      <!-- 队伍人数 -->
      <CustomCell :value="`${teamData.hasJoinNum} / ${teamData.maxNum}`" center title="队伍人数" icon="friends-o" />

      <!-- 过期时间 -->
      <van-cell v-if="teamData.expireTime" center>
        <template #icon>
          <van-icon name="underway-o" size="18" />
        </template>
        {{
          '过期时间: ' + new Date(teamData.expireTime).toLocaleString()
        }}
      </van-cell>

      <!-- 已加入的用户 -->
      <CustomCell center title="已加入的用户" icon="label-o" >
        <UserCardList :user-list="teamData.joinUsers" :loading="loading" />
      </CustomCell>

    </van-cell-group>
  </template>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

// 模拟的团队状态枚举
const teamStatusEnum = {
  0: '未开始',
  1: '进行中',
  2: '已结束'
};

// 假设这是从后端获取的团队数据
const teamData = ref({
  code: 0,
  data: {
    id: 16,
    name: '上分车队',
    description: '大家一起来摘星星啊',
    maxNum: 5,
    expireTime: '2024-07-31T16:00:00.000+00:00',
    userId: 1,
    status: 1,
    createTime: '2024-07-03T15:50:16.000+00:00',
    updateTime: '2024-07-03T15:50:16.000+00:00',
    createUser: {
      id: 1,
      username: '湖南彭于晏',
      userAccount: 'aWeiDiaoSi',
      userAvatar: null,
      gender: 1,
      phone: '1898899877',
      userRole: null,
      email: null,
      tags: '辅助',
      createTime: '2024-06-25T01:48:14.000+00:00',
      updateTime: '2024-07-04T12:45:05.000+00:00',
      planetCode: null
    },
    hasJoinNum: null,
    hasJoin: false,
    joinUsers: [
      {
        id: 1,
        username: '湖南彭于晏',
        userAccount: 'aWeiDiaoSi',
        avatarUrl: null,
        gender: 1,
        userPassword: null,
        phone: '1898899877',
        email: null,
        userStatus: 0,
        tags: '辅助',
        createTime: '2024-06-25T01:48:14.000+00:00',
        updateTime: null,
        isDelete: null,
        userRole: 0,
        planetCode: null
      }
    ]
  },
  message: 'ok'
});

// 假设还有一个加载状态
const loading = ref(false);
</script>

<style scoped>
</style>
